Same component for multiple sections

  • Steps

    1. in route

    
                       {
                        path: 'document-entry',
                        loadChildren: () => import('./document-entry/document-entry.module').then(m => m.DocumentEntryModule)
                      },
    
                      {
                        path: 'document-delivery',
                        loadChildren: () => import('./document-entry/document-entry.module').then(m => m.DocumentEntryModule)
                        
                      },
    
                      {
                        path: 'document-followup',
                        loadChildren: () => import('./document-entry/document-entry.module').then(m => m.DocumentEntryModule)
                        
                      },
                      
                    

    2. in listing component

    
        
                      ....
                    constructor(                  
                      private router: Router,
                      
                      
                    ) { }
                    .....
    
                    this.searchForm = this.fb.group({      
                   
                       'page': [''],
                        'section' :['']
                    });
                    .....
    
                    loadListing(pageNumber){
                        this.searchForm.patchValue({'section':this.router.url.split('?')[0]});
                    }
                    .....
    
                    gotoPage(url){  
                        if(this.searchForm.get('section').value!=''){
                          url+='&section='+this.searchForm.get('section').value;
                        }
                        this.router.navigateByUrl(url);
                    }
    
    
                    

    3. in details component

    
    
                    ngOnInit(): void {
                        
                        this.route.queryParams
                          .subscribe(params => {
                              this.detailsId=params.id;                        
    
                              if(params.section){
                                this.backUrl=params.section;              
                              }
    
                              
                          });
    
                    }
    
    
                    gotoPage(url){    
                        if(this.backUrl!=''){
                          url=this.backUrl;
                        }
                        this.router.navigateByUrl(url);
                      }
    
                    

    4. in api

    
    
                    if(isset($input['section'])){
                        switch($input['section']){
                            case '/document-approval':
                              $query = $query->where('document_entries.status_id',$input['status_id']);
                            break;  
                          }
                    }